import { Button, Form, Input, message, Modal } from "antd";
import { googleJumpApi } from "apis";
import { Component } from "react";

export default class LoginModal extends Component {
	UNSAFE_componentWillReceiveProps(props) {
		if (props.isModalVisible !== undefined) {
			this.setState({
				isModalVisible: props.isModalVisible,
			});
		}
	}

	loginClick(e) {
		const _this = this;
		googleJumpApi(e)
			.then(function (res) {
				if (res.code === 200) {
					message.loading("正在加载");
					window.open("http://" + res.data.url);
					_this.closeModel();
				} else {
					message.error(res.msg);
				}
			})
			.catch(function (err) {
				message.error(err);
			});
	}

	render() {
		const layout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 10 },
		};

		const buttonLayout = {
			wrapperCol: {
				offset: 8,
				span: 16,
			},
		};

		return (
			<Modal
				// title={this.state.title}
				// visible={this.props.isModalVisible}
				// onCancel={this.closeModel.bind(this)}
				{...this.props}
				destroyOnClose={true}
				closable={true}
				footer={[]}
				maskStyle={{
					backgroundColor: "rgba(0, 0, 0, 0.8)",
				}}
				style={{}}
				bodyStyle={{ borderRadius: "25px" }}
			>
				<Form {...layout} onFinish={this.loginClick.bind(this)}>
					<Form.Item
						label="用户名"
						name="username"
						rules={[
							{
								required: true,
								message: "请输入你的用户名",
							},
						]}
					>
						<Input />
					</Form.Item>

					<Form.Item
						label="密码"
						name="password"
						rules={[
							{
								required: true,
								message: "请输入你的密码",
							},
						]}
					>
						<Input.Password />
					</Form.Item>

					<Form.Item {...buttonLayout}>
						<Button
							type="primary"
							htmlType="submit"
							style={{ marginTop: "0px", marginBottom: "0px" }}
						>
							登录
						</Button>
					</Form.Item>
				</Form>
			</Modal>
		);
	}
}
